<template>
  <el-menu
    router
    background-color="#2f4056"
    text-color="#bfbbbb"
    active-text-color="#fff"
    :default-active="currentRouteName"
  >
    <template v-for="(item, index) in menu" :key="index" :index="index">
      <!-- 有子菜单-->
      <el-sub-menu :index="item.path" v-if="item.children">
        <template #title>
          <el-icon size="1.25em">
            <component :is="item.meta.icon"></component>
          </el-icon>
          <span v-if="item.meta">{{ item.meta.title }}</span>
        </template>

        <template v-for="(child, childIndex) in item.children || []" :key="childIndex">
          <el-menu-item v-if="child.meta.isNav" :index="child.path" :route="{ name: child.name }">
            <el-icon size="1.25em">
              <component :is="child.meta.icon"></component>
            </el-icon>
            <span>{{ child.meta.title }}</span>
          </el-menu-item>
        </template>
      </el-sub-menu>

      <!-- 无子菜单-->
      <el-menu-item :index="item.path" :route="{ name: item.name }" v-else-if="item.meta.isNav">
        <el-icon size="1.25em">
          <component :is="item.meta.icon"></component>
        </el-icon>
        <span>{{ item.meta.title }}</span>
      </el-menu-item>
    </template>
  </el-menu>
</template>
<script lang="ts">
import { defineComponent, computed } from 'vue'
import { useRoute, RouteRecordRaw } from 'vue-router'
import { routes, router } from '@/router'
import tabs from '@/components/layouts/Tabs.vue'
import { useAuthStore } from '@/stores/user'
import { useConfigStore } from '@/stores/syscfg'
export default defineComponent({
  components: {
    tabs
  },
  setup() {
    const currentRoute = useRoute()
    const store = useAuthStore()
    const config = useConfigStore()

    const viewKey = computed(() => {
      return currentRoute.path || Date.now()
    })
    const menu = computed(() => {
      let routesList = JSON.parse(JSON.stringify(config.cfg.routes))

      let menu = []
      for (let routes of routesList) {
        if (routes.children && routes.children.length > 0) {
          let a = false
          let c = routes.children.filter((child) => {
            let b = store.user.permission.includes(child.meta.permission)
            a = b | a
            return b
          })
          routes.children = c
          if (store.user.permission.includes(routes.meta.permission) | a) {
            menu.push(routes)
          } else {
          }
        } else {
          if (store.user.permission.includes(routes.meta.permission)) {
            menu.push(routes)
          } else {
          }
        }
      }
      return menu
    })
    const currentRouteName = computed(() => {
      return currentRoute.path
    })
    const currentRouteActiveMenu = computed(() => {
      return currentRoute.meta?.activeMenu || ''
    })

    return {
      viewKey,
      menu,
      currentRouteName,
      currentRouteActiveMenu,
      store
    }
  }
})
</script>

<style scoped>
.el-menu {
  border: none;
}
:deep(.el-menu .el-menu-item) {
  background: rgb(12, 15, 19) !important;
}
:deep(.el-menu .el-menu-item) {
  background: rgb(12, 15, 19) !important;
}
:deep(.el-menu .is-active) {
  background: #0069b7 !important;
}
.is-active {
  background-color: #0069b7 !important;
}
</style>
